<?php include_once('header.php'); ?>
<?php include_once('MenuView.php'); ?>
<script src="js/jquery.filestyle.js" type="text/javascript"></script>
<div id="profileContent">
        <div id="uploadDiv">
            
            <?php echo form_open_multipart('Alumno/uploadFile') ?>
                <div id ="uploadTopView">
                    <input type="file" name="selectedFile" id="selectedFileInput" value="+"/>
                    <label id="progressLabel" ></label>
                </div>
                <div id ="uploadBottomView">
                    <input id="uploadButton" type="button" value="Subir" onclick="uploadFile()" />
                    <progress id="progressBar" value="0" max="100" style="width: 300px"></progress>
                </div>
            </form>
        </div>
        <div id="filesTableDiv">
            <table border="1" style="width: 100%">
               
                    <th>File</th>
                    <th>Size</th>
                    <th>Date</th>
                <?php if(isset($files)){ ?>
                    <?php foreach ($files as $file){ ?>    
                        <tr>
                            <td><?php echo $file->name ?></td>
                            <td><?php echo $file->size ?></td>
                            <td><?php echo $file->date ?></td>
                        </tr>
                   <?php } ?>     
                <?php } ?>
                
            </table>
        </div>
    </form>
</div>

<script>
/* Script written by Adam Khoury @ DevelopPHP.com */
/* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */

$(document).ready(function(){
       
        _element('uploadButton').style.visibility='hidden';
     
    });

$("#selectedFileInput").change( function(){
    if (this.value) {
        _element('uploadButton').style.visibility='visible';
    }else {
        _element('uploadButton').style.visibility='hidden';
    }
    
});

function _element(el){
	return document.getElementById(el);
}
function uploadFile(){

	var file = _element('selectedFileInput').files[0];
        var formdata = new FormData();
        formdata.append('selectedFile', file);
        var ajax = new XMLHttpRequest();
        ajax.upload.addEventListener("progress", progressHandler, false);
        ajax.addEventListener("load", completeHandler, false);
        ajax.addEventListener("error", errorHandler, false);
        ajax.addEventListener("abort", abortHandler, false);
        ajax.open("POST", "Alumno/upload");
        ajax.send(formdata);
        
}
function progressHandler(event){
        
        var percent = (event.loaded / event.total) * 100;
        var loaded = event.loaded;
        var total = event.total;
        var final_loaded = Math.round(loaded/10000)/100;
        var final_total = Math.round(total/10000)/100;
	_element("progressBar").value = Math.round(percent);
	_element("progressLabel").innerHTML = final_loaded+" mb  de  "+final_total+" mb ("+Math.round(percent)+"%)";
}

function completeHandler(event){
	_element("progressBar").value = 0;
        _element("progressLabel").innerHTML = ""; 
}
function errorHandler(event){
        alert("Falló: "+event.target.responseText);
}
function abortHandler(event){
	alert("Se abortó: "+event.target.responseText);
}
</script>

<?php include_once('footer.php'); ?>